<template>
  <div>
    <!-- 新增dialog -->
    <el-dialog title="新增部门" :visible.sync="dialogAddFormVisible">
      <el-form :model="addData">
        <div class="top">
          <el-form-item label="部门编号" label-width="">
            <el-input
              v-model="addData.deptNo"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门名称" label-width="">
            <el-input
              v-model="addData.deptName"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属组织"
            ><br />
            <el-select
              v-model="addData.deptOrganizaion"
              placeholder="请选择所属组织"
            >
              <el-option
                label="ABC综合体项目"
                value="ABC综合体项目"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" label-width="">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addData.createTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用户数" label-width="">
            <el-input
              v-model="addData.userCount"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="建筑数" label-width="">
            <el-input
              v-model="addData.buildingCount"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </div>
        <p><strong>负责人</strong></p>
        <div class="bottom">
          <el-form-item label="第一负责人" label-width="">
            <el-input
              v-model="addData.person"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" label-width="">
            <el-input
              v-model="addData.personPhone"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogAddFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="addDep">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑dialog -->
    <el-dialog title="编辑部门" :visible.sync="dialogEditFormVisible">
      <el-form :model="editData">
        <div class="top">
          <el-form-item label="部门编号" label-width="">
            <el-input v-model="editData.deptNo" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" label-width="">
            <el-input v-model="editData.deptName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属组织"
            ><br />
            <el-select
              v-model="editData.deptOrganizaion"
              placeholder="请选择所属组织"
            >
              <el-option
                label="ABC综合体项目"
                value="ABC综合体项目"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <p><strong>负责人</strong></p>
        <div class="bottom">
          <el-form-item label="第一负责人" label-width="">
            <el-input v-model="editData.person" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" label-width="">
            <el-input
              v-model="editData.personPhone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogEditFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="editDep">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除dialog -->
    <el-dialog
      title="删除提示"
      :visible.sync="dialogDelFormVisible"
      width="30%"
    >
      <div>
        <i class="el-icon-delete-solid" style="font-size: 40px"></i>
      </div>
      <h3 style="margin-top: 30px">
        删除部门会影响和部门关联的用户和建筑，是否确认删除？
      </h3>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogDelFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="delDep">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 批量删除dialog -->
    <el-dialog
      title="批量删除提示"
      :visible.sync="dialogBatchDelFormVisible"
      width="30%"
    >
      <div>
        <i class="el-icon-delete-solid" style="font-size: 40px"></i>
      </div>
      <h3 style="margin-top: 30px">
        删除部门会影响和部门关联的用户和建筑，是否确认删除？
      </h3>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogBatchDelFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="batchDelDep"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //删除
      delId: null,
      //批量删除
      delIdArr: [],
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      dialogDelFormVisible: false,
      dialogBatchDelFormVisible: false,
      // addData:{
      //   deptNo:'',
      //   deptName:'',
      //   deptOrganizaion:'',
      //   person:'',
      //   personPhone:''
      // }
      addData: {
        buildingCount: null,
        createTime: "",
        deptName: "",
        deptNo: "",
        deptOrganizaion: "",
        id: null,
        person: "",
        personPhone: "",
        userCount: null,
      },
      editData: [],
    };
  },
  methods: {
    //增加部门
    addDep() {
      this.$axios({
        url: "/dept",
        method: "post",
        data: this.addData,
      }).then((res) => {
        console.log("addData", res);
        if (res.data.code == 200) {
          this.$message.success("增加成功");
          this.$emit("render");
          this.dialogAddFormVisible = false;
        } else {
          this.$message.error("增加失败");
        }
      });
    },
    //修改部门
    editDep() {
      console.log(this.editData);
      this.$axios({
        url: "/dept",
        method: "put",
        data: this.editData,
      }).then((res) => {
        console.log(res.data.code);
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.$emit("render");
          this.dialogEditFormVisible = false;
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    //删除部门
    delDep() {
      console.log(this.delId);
      this.$axios({
        url: `/dept/${this.delId}`,
        method: "delete",
        data: this.delId,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.$emit("render");
          this.dialogDelFormVisible = false;
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    //批量删除
    batchDelDep() {
      console.log(this.delIdArr);
      this.$axios({
        url: "/depts",
        method: "delete",
        data: this.delIdArr,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("批量删除成功");
          this.$emit("render");
          this.dialogBatchDelFormVisible = false;
        } else {
          this.$message.error("批量删除失败");
        }
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
// .dialog-footer{
// padding-right: 80px;
// }
.el-button {
  color: #0a92fa;
  &:hover {
    color: #fff;
    background: #0a92fa;
  }
}
/deep/.iconfont {
  position: relative;
  top: 2px;
  font-size: 18px;
  margin-right: 10px;
}
.el-select {
  display: block;
}
/deep/.el-form-item__label::before {
  content: "*";
  color: #ff0084;
}
p {
  border-bottom: 1px solid #ccc;
  width: 94%;
}
.el-form {
  padding: 20px;
  p {
    text-align: left;
    line-height: 50px;
    font-size: 1.2em;
  }
}
.top,
.bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.el-form-item {
  width: 44%;
  margin-right: 40px;
}
</style>